<template>
  <input type="file" accept="image/*" @change="upimg">
  <el-row>
    <el-col>
      <div class="block">
        <span class="demonstration">图片位置</span>
        <el-image :src="upUrl">
          <template #placeholder>
            <div class="image-slot">Loading<span class="dot">...</span></div>
          </template>
        </el-image>
      </div>
    </el-col>
  </el-row>
</template>

<script setup>
import {ref, reactive, onMounted} from "vue";
import axios from '@/plugins/axios.js'
import * as qiniu from 'qiniu-js'

let upUrl=ref("")

let upimg=(e)=>{
  if (e.target != null){
    //已经选择文件
    let file = e.target.files[0];
    //文件名
    let filename = file.name;
    //获取文件
    let fileType = filename.substring(filename.lastIndexOf("."));
    //去业务服务器(自己的服务器)获取token
    axios.get("upload/token").then(result =>{
      let token = result.data.token;
      let domain = result.data.domain;
      console.log(result)
      //服务器对象
      let observable = qiniu.upload(file,null,token);
      //上传之后的回调
      const  observer = {
        next: (res) =>{

        },
        complete:(d)=>{
          //上传成功之后,回调方法
          let url = domain + d.hash
          upUrl.value = url;
        },
        error: (e)=>{
          console.log("异常:"+e)
        }
      }
      //上传
      observable.subscribe(observer);

    })

  }
}

onMounted(() => {
});
</script>

<style scoped>

</style>